<template>
	<view>
		<view>
			<view class="cu-form-group">
				<view class="title">姓名</view>
				<input placeholder="请填写姓名" name="input" v-model="form.realname"></input>
			</view>
			<view class="cu-form-group flex justify-start">
				<view class="title">性别</view>
				<view>
					<radio-group name="" @change="PickerChange">
						<label>
							<radio value="1" checked="form.sex==1" /><text class="margin-left-xs margin-right">男</text>
							<radio value="2" checked="form.sex==2" /><text class="margin-left-xs margin-right">女</text>
						</label>
					</radio-group>
				</view>
			</view>
			
			<view class="cu-form-group">
				<view class="title">证件类型</view>
				<picker @change="PickerChange" :value="index" :range="picker">
					<view class="picker">
						{{picker[index]}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">证件号码</view>
				<input placeholder="请填写证件号码" v-model="form.idcard" name="input"></input>
			</view>
			<!-- <view class="cu-form-group">
				<view class="title">手机号码</view>
				<input placeholder="请填写手机号码" name="input"></input>
			</view> -->
		</view>
		
		<view class="padding" style="margin-top: 200rpx;">
			<view class="padding-lr-xl">
				<my-btn class="block" bg="#1f1f1f" v-if="false">提交</my-btn>
				<my-btn class="block" bg="#999999" @click.native="update">修改</my-btn>
			</view>
		</view>
	</view>
</template>

<script>
	import store from '@/store.js'
	export default {
		data() {
			return {
				index: 0,
				picker: ['身份证'],
				form: {
					realname: '',
					sex: '',
					idcard: ''
				}
			};
		},
		computed: {
			userinfo: state => store.state.userinfo
		},
		onLoad() {
			setTimeout(() => {
				this.form.realname = this.userinfo.realname || ''
				this.form.sex = this.userinfo.sex || 1
				this.form.idcard = this.userinfo.idcard || ''
			}, 300)
		},
		methods: {
			PickerChange(e) {
				console.log(e)
				this.form.sex = e.detail.value
			},
			update() {
				this.$u.post('/user/userinfo', this.form).then(res => {
					this.$msg('修改成功')
					this.$u.api.getUserinfo()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F4F4F4;
	}
	.picker {
		text-align: left !important;
	}
	.title {
		width: 150rpx;
	}
</style>
